<template>
  <div class="equipcontent">
    <!-- 设备显示 -->
    <div
      class="equip"
      v-for="(item, index) in equipList.slice(
        (currentPage - 1) * pageSize,
        currentPage * pageSize
      )"
      :key="index"
    >
      <div class="equipName">{{ item.name }}</div>
      <div class="equipstatus"><span>服务器状态 </span><span>{{ item.equipstatus }}</span> </div>
    </div>
  </div>

  <!-- 翻页 -->
  <div class="swap">
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="equipList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @pagination=""
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const currentPage = ref(1); //当前页面
const pageSize = ref(56); //单页面显示多少个
const equipList = ref([
  {
    name: "192.168.1.101",
    equipstatus:"在线"
  },
  {
    name: "192.168.1.102",
    equipstatus:"在线"
  },
  {
    name: "192.168.1.103",
    equipstatus:"在线"
  },
  {
    name: "192.168.1.104",
    equipstatus:"在线"
  },
  {
    name: "192.168.1.101",
  },
  {
    name: "192.168.1.102",
  },
  {
    name: "192.168.1.101",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
]);
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
};

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条 `);
  pageSize.value = val;
};
</script>

<style lang="less" scoped>
@import "./fenquView.less";
</style>